<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>实例-CloudShop</title>
    <!--页面统一风格-->
    <link rel="stylesheet" href="moveline/css/toast.css">
    <link rel="stylesheet" href="moveline/css/head.css">
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script src="moveline/js/jquery.easing.js"></script>
    <script src="moveline/js/toast.js"></script>
    <script src="moveline/js/moveline.js"></script>
    <script type="text/javascript" src="zTree/layer/layer.js"></script>
    <link rel="stylesheet" href="zTree/layer/theme/default/layer.css">
    <link rel="stylesheet" href="zTree/layui/css/layui.css">
    <!--单用-->
    <link rel="stylesheet" href="jquery/jquery-ui.1.12.1.css">

</head>
<body>
<div class="header">
    <ul id="navigation">
        <li>主页</li>
        <li>云主机</li>
        <li>云计算</li>
        <li>云Python</li>
        <li>云存储</li>
        <li id="quit">退出</li>
    </ul>
</div>
<!--head.js要放在header之后-->
<script src="moveline/js/head.js"></script>
<!--工具条-->
<div id="toolBar" class="toolBar">
    <ul class="toolBarUl">
        <li>创建实例</li>
        <li>删除实例</li>
        <li>查看配额</li>
        <li>更改配额</li>
    </ul>
</div>
<!--用户实例-->
<div class="ui-widget">
    <table id="instanceTable" class="ui-widget ui-widget-content">
        <thead>
        <tr class="ui-widget-header ">
            <th><input type="checkbox" id="multi-select"></th>
            <th>实例</th>
            <th>镜像</th>
            <th>地址</th>
            <th>状态</th>
            <th>是否锁定</th>
            <th>创建时间</th>
            <th>操作实例</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<!--单台虚拟机的操作列表-->
<div id="rMenu">
    <ul id="syncUrl"><li>同步URL</li></ul>
    <ul id="syncStatus"><li>同步IP和状态</li></ul>
    <ul id="start"><li>启动</li></ul>
    <ul id="stop"><li>关闭</li></ul>
    <ul id="reboot"><li>重启</li></ul>
    <ul id="suspend"><li>挂起</li></ul>
    <ul id="resume"><li>恢复</li></ul>
    <ul id="pause"><li>暂停</li></ul>
    <ul id="unpause"><li>继续</li></ul>
    <ul id="lock"><li>锁定</li></ul>
    <ul id="unlock"><li>解锁</li></ul>
    <ul id="delete"><li>删除</li></ul>
</div>

</body>
<link rel="stylesheet" href="css/instances.css">

<script src="javascript/table.js"></script>
<script src="javascript/instances.js"></script>
<script type="text/javascript">
    $("#multi-select").click(selectAllCheckBox);
    $(".toolBarUl").moveline({
        color: '#ec6057',
        position: 'inner',
        animateType: 'easeOutBounce',
        click: function (ret) {
            console.log(ret);
            switch (ret.index) {
                case 0: {
                    layer.open({
                        title:"创建云主机，你值得拥有",
                        type: 2,
                        content: 'instanceform',
                        area: ['550px', '600px']
                    });
                }break;
                case 1: {
                    var array = getNameArrayOfCheckedVHost();
                    if(array.length>0){
                        layer.confirm("确定要删除"+array+'吗?不能恢复的哟，可不要怪我哦！', {icon: 6, title:'提示'},
                            function(index) {
                                delCheckedInstance(array);
                                layer.close(index);
                            });
                    }
                }break;
                case 2:{
                    layer.open({
                        title:"配额概况",
                        type: 2,
                        content: 'quotaform',
                        area: ['770px', '300px']
                    });
                }break;
                case 3:{
                    layer.open({
                        title:"修改配额",
                        type: 2,
                        content: 'changequotaform',
                        area: ['550px', '600px']
                    });
                }break;
            }
        }
    });
</script>
</html>